<template>
  <div class="flex justify-between">
    <div class="header-title mb-4">产品加工说明</div>
    <el-button type="primary" @click="addProcessing" v-if="handleType != 'view'"
      >新增</el-button
    >
  </div>
  <el-table
    :data="form"
    border
    style="width: 100%"
    height="500"
    :row-class-name="rowClassName"
  >
    <el-table-column type="index" label="序号" width="60" />
    <el-table-column prop="date" label="加工类型">
      <template #default="{ row }">
        <template v-if="handleType == 'view'">
          {{ getProductIdentification(row.product_identification) }}
        </template>
        <el-select
          v-else
          class="w-full"
          v-model="row.product_identification"
          placeholder="加工类型"
          @change="changeProductIdentification($event, row)"
        >
          <el-option
            v-for="item in options['goods.GoodsSkuIdentificationProcessing']?.[0]
              .productIdentificationText"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </template>
    </el-table-column>
    <el-table-column prop="date" label="加工说明">
      <template #default="{ row }">
        <template v-if="handleType == 'view'">
          {{ getProcessingMethod(row.processing_method) }}
        </template>
        <el-select
          v-else
          class="w-full"
          v-model="row.processing_method"
          placeholder="加工说明"
          @change="changeProcessingMethod($event, row)"
        >
          <el-option
            v-for="item in options['goods.GoodsSkuIdentificationProcessing']?.[0]
              .processingMethodText"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </template>
    </el-table-column>
    <el-table-column prop="date" label="是否回仓">
      <template #header>
        <div class="flex items-center">
          是否回仓
          <el-tooltip
            class="box-item"
            effect="dark"
            :content="is_refund_warehouse_tooltip"
            placement="top-start"
          >
            <svg-icon icon-class="hint_cover2"></svg-icon>
          </el-tooltip>
        </div>
      </template>
      <template #default="{ row }">
        <template v-if="row.product_identification == 11 && row.processing_method == 1">
          <el-select
            class="w-full"
            v-model="row.is_refund_warehouse"
            placeholder="是否回仓"
          >
            <el-option
              v-for="item in options['goods.GoodsSkuIdentificationProcessing']?.[0]
                .isRefundWarehouseText"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </template>
        <template v-else>--</template>
      </template>
    </el-table-column>
    <el-table-column prop="date" label="标识样式选择">
      <template #default="{ row }">
        <template v-if="handleType == 'view'">
          {{ getTayStyle(row.tag_style, row.product_identification) }}
        </template>
        <template v-else>
          <el-select
            class="w-full"
            v-model="row.tag_style"
            placeholder="标识样式选择"
            v-if="row.product_identification == 3"
            @change="changeTagStyle($event, row)"
          >
            <el-option
              v-for="item in options['goods.GoodsSkuIdentificationProcessing']?.[0]
                .tagStyleText"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <el-select
            class="w-full"
            v-model="row.tag_style"
            placeholder="标识样式选择"
            v-if="row.product_identification == 10"
            @change="changeTagStyle($event, row)"
          >
            <el-option
              v-for="item in options['goods.GoodsSkuIdentificationProcessing']?.[0]
                .agentText"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </template>
      </template>
    </el-table-column>
    <el-table-column prop="date" label="样式图片">
      <template #default="{ row }">
        <VImage :src="row.image" />
      </template>
    </el-table-column>
    <el-table-column prop="date" label="备注">
      <template #default="{ row }">
        <template v-if="handleType == 'view'">
          {{ row.remark }}
        </template>
        <el-input v-else v-model="row.remark" placeholder="备注"></el-input>
      </template>
    </el-table-column>
    <el-table-column prop="date" label="操作" width="120" v-if="handleType != 'view'">
      <template #default="{ row, $index }">
        <el-button type="danger" link @click="deleteProcessing(row, $index)"
          >删除</el-button
        >
      </template>
    </el-table-column>
  </el-table>
</template>
<script setup name="customInfo">
import { reactive, toRefs } from "vue";
import { product_identification_image, tag_style_image } from "@/utils/product/data.js";
import VImage from "@/components/Image/index.vue";
import { is_refund_warehouse_tooltip } from "@/utils/tooltip.js";

let options = reactive(inject("options"));

const emit = defineEmits(["update:modelValue"]);
const props = defineProps({
  modelValue: {
    type: Array,
    default: () => {
      return [];
    },
  },
  info: {
    type: Object,
    default: () => {
      return {};
    },
  },
  is_order_exist: {
    type: Boolean,
    default: false,
  },
  handleType: {
    type: String,
    default: "edit",
  },
});

const { handleType } = toRefs(props);

const form = computed({
  get() {
    return props.modelValue;
  },
  set(val) {
    emit("update:modelValue", val);
  },
});

// 新增产品标识
const addProcessing = () => {
  form.value.push({
    product_identification: "",
    processing_method: "",
    remark: "",
  });
};

const changeProductIdentification = (val, row) => {
  const image = product_identification_image.get(val);
  row.image = image;
  if (val == 3) {
    row.tag_style = 1;
    changeTagStyle(row.tag_style, row);
  } else if (val == 10) {
    row.tag_style = 6;
    changeTagStyle(row.tag_style, row);
  } else {
    row.tag_style = 0;
  }
  row.is_refund_warehouse = "";
  return image;
};

const changeProcessingMethod = (val, row) => {
  row.is_refund_warehouse = "";
};

const changeTagStyle = (val, row) => {
  const image = tag_style_image.get(val);
  row.image = image;
  return image;
};

// 删除产品标识
const deleteProcessing = (row, index) => {
  if (row.id) {
    form.value[index].delete = 1;
  } else {
    form.value.splice(index, 1);
  }
};

const rowClassName = ({ row }) => {
  if (row.delete === 1) {
    return "hidden-row";
  }
  return "";
};

// 获取产品标识
const getProductIdentification = (val) => {
  const findItem = options.value[
    "goods.GoodsSkuIdentificationProcessing"
  ]?.[0].productIdentificationText.find((i) => i.value == val);
  if (findItem == undefined) return "";
  return findItem.label;
};

// 获取加工说明
const getProcessingMethod = (val) => {
  const findItem = options.value[
    "goods.GoodsSkuIdentificationProcessing"
  ]?.[0].processingMethodText.find((i) => i.value == val);
  if (findItem == undefined) return "";
  return findItem.label;
};

// 获取样式
const getTayStyle = (val, type) => {
  if (type == 3) {
    const findItem = options.value[
      "goods.GoodsSkuIdentificationProcessing"
    ]?.[0].tagStyleText.find((i) => i.value == val);
    if (findItem == undefined) return "";
    return findItem.label;
  } else if (type == 10) {
    const findItem = options.value[
      "goods.GoodsSkuIdentificationProcessing"
    ]?.[0].agentText.find((i) => i.value == val);
    if (findItem == undefined) return "";
    return findItem.label;
  }
};
</script>
<style scoped></style>
